import {messages} from "share/common";
import React, { Component } from "react";
import { Icon, Row, Col } from "antd";
import tipImg from 'images/audit-tips/tip-blue.png'
import Condition from "components/condition";
import AuditTipsButton from "./index";
import configureStore from 'stores';

const { If, Else } = Condition;

class AuditTipsBottomFrame extends Component {

  state = {
    toHideFrame: false,
    display: localStorage.getItem(`audit-tips_${this.props.from}`) || 'block'
  };

  handleClose = () => {
    const { from } = this.props;
    this.setState({ toHideFrame: true });
    localStorage.setItem(`audit-tips_${from}`, 'none')
  };

  renderButton = type => {
    const { from } = this.props;
    const typeMap = {
      scan: {
        text: messages('expense-14.key50')/*扫一扫*/,
        radioKey: 'scan_page'
      },
      auditQuestion: {
        text: messages('expense-14.key51')/*批注*/,
        radioKey: 'auditQuestion_reject',
        collapseKey: ['auditQuestion_reject_annotate']
      }
    };
    return (
      <AuditTipsButton
        type="text"
        from={from}
        pageKey={type}
        text={typeMap[type].text}
        radioKey={typeMap[type].radioKey}
        collapseKey={typeMap[type].collapseKey}
      />
    )
  };

  render() {
    const { display, toHideFrame } = this.state;
    const { from } = this.props;
    const menuWidth = configureStore.store.getState().main.menuWidth;
    const style = Object.assign({},this.props.style || {}, { display }, {width: `calc(100vw - ${menuWidth}px)`});
    return (
      <div className={`audit-tips-bottom-frame ${toHideFrame ? 'animation-hide' : ''}`} style={style}>
        <div className="audit-tips-bottom-frame-circle"/>
        <div className="audit-tips-bottom-frame-square"/>
        <img src={tipImg} className="audit-tips-bottom-frame-img" alt=""/>
        <div className="audit-tips-bottom-frame-title">
          {messages('expense-14.key52')/*快速审核小技巧*/}
        </div>
        <Row gutter={20}>
          <Col span={18}>
            <Condition>
              <If value={from === 'auditList'}>
                <div className="audit-tips-bottom-frame-sub-title">
                  Q：{messages('expense-14.key53')/*如何快速查看单据？*/}
                </div>
                <div className="audit-tips-bottom-frame-content">
                  A：{messages('expense-14.key54')/*使用“APP”或“扫码枪”的扫一扫功能，快速查看单据，无须手工录入单号。*/}
                </div>
              </If>
              <Else>
                <Row className="audit-tips-bottom-frame-content">
                  <Col span={4} className="audit-tips-bottom-frame-content-title">
                    {messages('expense-14.key27')/*审核通过*/}：
                  </Col>
                  <Col span={20}>
                    {messages('expense-14.key55')/*若仅需核对“纸质票据”，无需审核“线上单据”，可使用“APP”或者“扫码枪”的*/}
                    {this.renderButton('scan')}
                    {messages('expense-14.key56')/*功能，直接审核通过。*/}
                  </Col>
                </Row>
                <Row className="audit-tips-bottom-frame-content">
                  <Col span={4} className="audit-tips-bottom-frame-content-title">
                    {messages('expense-14.key57')/*审核驳回*/}：
                  </Col>
                  <Col span={20}>
                    {messages('expense-14.key58')/*在有问题的内容上进行*/}
                    {this.renderButton('auditQuestion')}
                    {messages('expense-14.key59')/*，便于员工针对具体字段进行修改。*/}
                  </Col>
                </Row>
              </Else>
            </Condition>
          </Col>
          <Col span={6}>
            <AuditTipsButton type="button" from={from} />
          </Col>
        </Row>
        <div className="audit-tips-bottom-frame-close">
          <Icon type="close" onClick={this.handleClose} />
        </div>
      </div>
    )
  }
}

export default AuditTipsBottomFrame;
